<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成短链接</title>
    <link href="https://file.51kuafu.com/0c/5e/d985fdbddc027124d4e6879ce1a1860832cda85e2b517c18d8fbd2fffc06.css?bootstrap.min.css" rel="stylesheet">
    <link href="https://file.51kuafu.com/b2/2c/8ea45fe905650f8087108b5ed32c1923bcd80d400adc9b0241f18be40208.css?bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="https://file.51kuafu.com/ff/15/23fb7389539c84c65aba19260648793bb4f5e29329d2ee8804bc37a3fe6e.js?jquery.min.js"></script>
    <script src="https://file.51kuafu.com/7e/02/c082fedfc821a8a51fe004dab6896dd928876a21ccac8675142c2e2f7b1f.js?bootstrap.bundle.min.js"></script>
    <script src="https://file.51kuafu.com/6e/a5/5ea86749ee1fe560fabac6b3effd81b33046fa74dc657e24d41d28110a9f.js?bootstrap-datepicker.min.js"></script>
    <script src="https://file.51kuafu.com/b4/c3/0f02638b91ebf14a458a03d143082df12dada8e0bb02a33248b5469a6df0.js?bootstrap-datepicker.zh-CN.min.js"></script>
</head>

<body>

<div class="container-fluid">
    <div class="jumbotron alert-primary">
        <h3 class="display-4"><b>生成短链接</b></h3>
        <hr class="my-4">

        <div id="collapseExample">
            <form method="post" action="upload" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="exampleFormControlFile1"></label>
                    <input type="text" class="form-control" name="url" id="exampleFormControlFile1">
                    <br>
                </div>
                <button type="button" class="btn btn-primary" id="liveToastBtn">生成短连接</button>
                <hr>
                <label for="inlineFormInput"></label><textarea type="text" style="width: 80%" class="form-control" name="sort" id="inlineFormInput" placeholder="成功后这里会显示短网址" cols="4"></textarea>
            </form>
        </div>
    </div>


</div>

<script>
    $('#liveToastBtn').on('click', function () {
        let originUrl = $('#exampleFormControlFile1').val();
        if (!originUrl.length) {
            alert('请输入网址');return;
        }
        if ('http' !== originUrl.slice(0, 4)) {
            alert('请输入正确的网址');return;
        }
        $.ajax({
            url: 'addUrl',
            type: 'post',
            dataType: 'json',
            cache: false,
            data: {
                url: originUrl
            },
            success: function (json) {
                $('#inlineFormInput').html(json.data.shortUrl);
            }
        });
    });
</script>

</body>
</html>


